<template>
	<b-submit-page bottomExtraClass="bg-color-1 bottom-shadow" bottomPdClass="p-2-2">
		<view class="p-1-3 border b-active-op20 rounded-m mx-1-3 mb-2-2" v-if="couponData.length === 0">
			<c-empty></c-empty>
		</view>
		<view v-else class="mb-2-2">
			<coupon-item
				v-for="(el, i) in couponData"
				:data="el"
				:key="el.id"
				:mb="i < couponData.length - 1"
			/>
		</view>
		<view class="border b-active-op20 rounded-m mx-1-3 mb-2-2">
			<c-list-item title="优惠券价格" hideArrow>
				<template #suffix>
					<text class="color-main text-m font-semibold" style="text-decoration: line-through;">
						¥{{ intlNumberFormat(sumCouponPrice) }}
					</text>
				</template>
			</c-list-item>
			<c-list-item title="活动价格" hideArrow>
				<template #suffix>
					<text class="color-main text-m font-semibold">¥{{ intlNumberFormat(actData.consumeValue) }}</text>
				</template>
			</c-list-item>
		</view>
		<template #bottom>
			<view class="row-center">
				<view class="flex-1" />
				<view class="mr-3-1">
					<text class="text-l color-main">应付:</text>
					<text class="text-l font-semibold color-error">¥{{ intlNumberFormat(actData.consumeValue) }}</text>
				</view>
				<view style="width: 200rpx">
					<c-button type="" @touch="toPay" text="去支付" :disabled="!couponData || couponData.length === 0" />
				</view>
			</view>
		</template>
	</b-submit-page>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { intlNumberFormat } from '@/uni-sdk/utils/common.js';
import CouponItem from '../coupon-list/coupon-item.vue';
import { getActDetail } from '@/base/api/activity.js';

export default {
	components: {
		CouponItem,
	},
	onLoad() {
		const c = this.getOpenerEventChannel();
		c &&
			c.on('data', (data) => {
				if (data) {
					this.actData = data.actData;
					this.couponData = [data.actData.coupons];
					this.reload();
				}
			});
	},
	setup() {
		//data
		const actData = ref({});
		const couponData = ref([]);
		const sumCouponPrice = computed(() => {
			let re = 0;
			couponData.value.forEach((el) => {
				re += el.couponsValue;
			});
			return re;
		});
		async function reload(){
			if(!actData.value.id) return;
			const data = await getActDetail(actData.value.id);
			if(data) {
				actData.value = data;
				couponData.value = [data.coupons];
			}
		}
		function toPay(){}
		return {
			intlNumberFormat,
			actData,
			couponData,
			sumCouponPrice,
			toPay,
			reload,
		};
	},
};
</script>

<style></style>
